<template>
  <div class="page-container">
    <h2>新增视频课程</h2>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" class="form-card">
      <el-form-item label="视频信息" prop="videoInfo">
        <el-input v-model="formData.videoInfo" type="textarea" :rows="3" placeholder="请输入视频详细信息" />
      </el-form-item>
      <el-form-item label="视频价格" prop="videoPrice">
        <el-input-number v-model="formData.videoPrice" :min="0" :precision="2" style="width: 100%" />
      </el-form-item>
      <el-form-item label="订阅数" prop="subscribeNum">
        <el-input-number v-model="formData.subscribeNum" :min="0" />
      </el-form-item>
      <el-form-item label="视频类型" prop="videoType">
        <el-select v-model="formData.videoType">
          <el-option label="教学视频" :value="1" />
          <el-option label="娱乐视频" :value="2" />
          <el-option label="直播回放" :value="3" />
          <el-option label="其他" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item label="视频状态" prop="videoState">
        <el-radio-group v-model="formData.videoState">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="0">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { videoApi } from '@/api/video'

const formRef = ref()
const submitting = ref(false)

const formData = reactive({
  videoInfo: '',
  videoPrice: 0,
  subscribeNum: 0,
  videoType: 1,
  videoState: 1
})

const formRules = {
  videoInfo: [{ required: true, message: '请输入视频信息', trigger: 'blur' }],
  videoPrice: [{ required: true, message: '请输入视频价格', trigger: 'blur' }],
  videoType: [{ required: true, message: '请选择视频类型', trigger: 'change' }],
  videoState: [{ required: true, message: '请选择视频状态', trigger: 'change' }]
}

const handleReset = () => {
  Object.assign(formData, { videoInfo: '', videoPrice: 0, subscribeNum: 0, videoType: 1, videoState: 1 })
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true
    await videoApi.addVideo(formData)
    ElMessage.success('新增成功')
    handleReset()
  } catch (e) {
    if (e !== false) ElMessage.error('新增失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.page-container { padding: 20px; }
.form-card { max-width: 600px; }
</style>


